<!--
 * @Description: 我的订单页面组件
 * @Author: hai-27
 * @Date: 2020-02-20 17:21:54
 * @LastEditors: hai-27
 * @LastEditTime: 2020-02-27 13:36:27
 -->
<template>
    <div class="order">
        <!-- 信息录入头部 -->
        <div class="order-header">
            <div class="order-header-content">
                <p>
                    <i class="el-icon-s-order" style="font-size: 30px;color: #ff6700;"></i>
                    录入信息
                </p>
            </div>
        </div>
        <div class="order-empty">
            <el-button type="success" style="margin-right: 10px;" @click="dialogFormVisible=true">录入信息</el-button>
            <el-popconfirm
                    confirmButtonText='确定'
                    cancelButtonText='算了'
                    icon="el-icon-info"
                    iconColor="red"
                    title="确定删除选中信息？"
                    @onConfirm="deleteSelection"
            >
                <el-button type="danger" slot="reference">删除选中</el-button>
            </el-popconfirm>
<!--            <el-button type="danger" @click="deleteSelection"></el-button>-->
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    height="500px"
                    @selection-change="handleSelectionChange">

                <el-table-column
                        align="center"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        type="index"
                        label="序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="plantHeight"
                        label="株高/厘米"
                        width="180">
                    <template slot-scope="scope">
                        <div>{{scope.row.plantHeight}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="growingSeason"
                        label="生长期"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="leafColor"
                        label="叶色">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="leafShape"
                        label="叶形状">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="grainLength"
                        label="粒长/厘米">
                    <template slot-scope="scope">
                        <div>{{scope.row.grainLength}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="grainLength"
                        label="录入时间">
                    <template slot-scope="scope">
                        <div>{{scope.row.createTime|timestampToTime}}</div>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
        </div>
        <el-dialog title="信息录入" :visible.sync="dialogFormVisible" width="30%" @close="clearForm">
            <el-form label-position="left" label-width="80px" :rules="rules" ref="ruleForm"
                     :model="ruleForm">
                <el-form-item label="株高" prop="plantHeight">
                    <el-input v-model="ruleForm.plantHeight">
                        <template slot="append">厘米</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="生长期" prop="growingSeason">
                    <el-input v-model="ruleForm.growingSeason"></el-input>
                </el-form-item>
                <el-form-item label="叶色" prop="leafColor">
                    <el-input v-model="ruleForm.leafColor"></el-input>
                </el-form-item>
                <el-form-item label="叶形状" prop="leafShape">
                    <el-input v-model="ruleForm.leafShape"></el-input>
                </el-form-item>
                <el-form-item label="粒长" prop="grainLength">
                    <el-input v-model="ruleForm.grainLength">
                        <template slot="append">厘米</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="insertMessage('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import Pagination from '../components/Pagination'

    export default {
        data() {
            return {
                user: {},
                tableData: [],
                multipleSelection: [],
                dialogFormVisible: false,
                ruleForm: {
                    plantHeight: '',
                    growingSeason: '',
                    leafColor: '',
                    leafShape: '',
                    grainLength: ''
                },
                rules: {
                    plantHeight: [
                        {required: true, message: '请输入冬小麦株高', trigger: 'blur'}
                    ],
                    growingSeason: [
                        {required: true, message: '请输入冬小麦生长期', trigger: 'blur'}
                    ],
                    leafColor: [
                        {required: true, message: '请输入冬小麦叶色', trigger: 'blur'}
                    ],
                    leafShape: [
                        {required: true, message: '请输入冬小麦叶形状', trigger: 'blur'}
                    ],
                    grainLength: [
                        {required: true, message: '请输入冬小麦粒长', trigger: 'blur'}
                    ],
                },
                formInline: {
                    pageIndex: 1,
                    pageSize: 10,
                    userId: ''
                },
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
            };
        },
        // 注册组件
        components: {
            Pagination
        },

        activated() {

        },
        watch: {},
        created() {
            if (localStorage.getItem("user") != null) {
                this.user = JSON.parse(localStorage.getItem("user"))
                this.formInline.userId = this.user.id
                this.getData(this.formInline)
            }
        },
        methods: {
            clearForm() {
                this.ruleForm = {
                    plantHeight: '',
                    growingSeason: '',
                    leafColor: '',
                    leafShape: '',
                    grainLength: ''
                }
            },
            getData(param) {
                this.$axios.get("/api/message/getByUser", {
                    params: param
                })
                    .then(res => {
                        this.tableData = res.data.data.resultList
                        this.pageparm.total = res.data.data.totalCount
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    })
            },
            deleteSelection() {
                if(this.multipleSelection.length == 0){
                    this.$message.warning("请选择要删除的信息")
                    return;
                }
                let params = {
                    messages: JSON.stringify(this.multipleSelection)
                }
                this.$axios.post("/api/message/delete", params)
                    .then(res=>{
                        if(res.data.status == 200){
                            this.$message.success(res.data.message)
                            this.getData(this.formInline)
                        }else {
                            this.$message.error(res.data.message)
                        }
                    })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 分页插件事件
            callFather(parm) {
                this.formInline.pageIndex = parm.currentPage
                this.formInline.pageSize = parm.pageSize
                this.getData(this.formInline)
            },
            insertMessage(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.ruleForm.userId = this.formInline.userId
                        this.$axios.post("/api/message/insert", this.$qs.stringify(this.ruleForm))
                            .then(res => {
                                if(res.data.status == 200){
                                    this.pageparm.currentPage = this.formInline.pageIndex =  1
                                    this.pageparm.total = 0
                                    this.getData(this.formInline)
                                    this.dialogFormVisible = false;
                                }else {
                                    this.$message.error(res.data.message)
                                }
                            })
                            .catch(err => {
                                return Promise.reject(err);
                            })
                    } else {
                        return false;
                    }
                });
            },
        }
    };
</script>
<style scoped>
    .order {
        background-color: #ffffff;
        padding-bottom: 20px;
    }

    /* 我的订单头部CSS */
    .order .order-header {
        height: 64px;
        border-bottom: 2px solid #ff6700;
        background-color: #fff;
        margin-bottom: 20px;
    }

    .order .order-header .order-header-content {
        width: 1225px;
        margin: 0 auto;
    }

    .order .order-header p {
        font-size: 28px;
        line-height: 58px;
        float: left;
        font-weight: normal;
        color: #424242;
    }

    /* 我的订单头部CSS END */
    .order .content {
        width: 1225px;
        margin: 0 auto;
        background-color: #fff;
        margin-bottom: 50px;
    }

    .order .content ul {
        background-color: #fff;
        color: #424242;
        line-height: 85px;
    }

    /* 我的订单表头CSS */
    .order .content ul .order-info {
        height: 60px;
        line-height: 60px;
        padding: 0 26px;
        color: #424242;
        border-bottom: 1px solid #ff6700;
    }

    .order .content ul .order-info .order-id {
        float: left;
        color: #ff6700;
    }

    .order .content ul .order-info .order-time {
        float: right;
    }

    .order .content ul .header {
        height: 85px;
        padding-right: 26px;
        color: #424242;
    }

    /* 我的订单表头CSS END */

    /* 订单列表CSS */
    .order .content ul .product-list {
        height: 85px;
        padding: 15px 26px 15px 0;
        border-top: 1px solid #e0e0e0;
    }

    .order .content ul .pro-img {
        float: left;
        height: 85px;
        width: 120px;
        padding-left: 80px;
    }

    .order .content ul .pro-img img {
        height: 80px;
        width: 80px;
    }

    .order .content ul .pro-name {
        float: left;
        width: 380px;
    }

    .order .content ul .pro-name a {
        color: #424242;
    }

    .order .content ul .pro-name a:hover {
        color: #ff6700;
    }

    .order .content ul .pro-price {
        float: left;
        width: 160px;
        padding-right: 18px;
        text-align: center;
    }

    .order .content ul .pro-num {
        float: left;
        width: 190px;
        text-align: center;
    }

    .order .content ul .pro-total {
        float: left;
        width: 160px;
        padding-right: 81px;
        text-align: right;
    }

    .order .content ul .pro-total-in {
        color: #ff6700;
    }

    .order .order-bar {
        width: 1185px;
        padding: 0 20px;
        border-top: 1px solid #ff6700;
        height: 50px;
        line-height: 50px;
        background-color: #fff;
    }

    .order .order-bar .order-bar-left {
        float: left;
    }

    .order .order-bar .order-bar-left .order-total {
        color: #757575;
    }

    .order .order-bar .order-bar-left .order-total-num {
        color: #ff6700;
    }

    .order .order-bar .order-bar-right {
        float: right;
    }

    .order .order-bar .order-bar-right .total-price-title {
        color: #ff6700;
        font-size: 14px;
    }

    .order .order-bar .order-bar-right .total-price {
        color: #ff6700;
        font-size: 30px;
    }

    /* 订单列表CSS END */

    /* 订单为空的时候显示的内容CSS */
    .order .order-empty {
        width: 1225px;
        margin: 0 auto;
    }

    .order .order-empty .empty {
        height: 300px;
        padding: 0 0 130px 558px;
        margin: 65px 0 0;
        background: url(../assets/imgs/cart-empty.png) no-repeat 124px 0;
        color: #b0b0b0;
        overflow: hidden;
    }

    .order .order-empty .empty h2 {
        margin: 70px 0 15px;
        font-size: 36px;
    }

    .order .order-empty .empty p {
        margin: 0 0 20px;
        font-size: 20px;
    }

    /* 订单为空的时候显示的内容CSS END */
</style>
